<template>
    <div id="app">
        <h1>ECharts 测试样例</h1>
        <div ref="chartRef" style="width: 100%; height: 400px;"></div>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            chartInstance: null // 用于存储 ECharts 实例
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            // 通过 this.$echarts 获取全局注册的 ECharts
            this.chartInstance = this.$echarts.init(this.$refs.chartRef);

            const option = {
                title: {
                    text: "ECharts 柱状图测试样例"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                xAxis: {
                    type: "category",
                    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        name: "访问量",
                        type: "bar",
                        data: [500, 200, 360, 1000, 900, 300, 600],
                        markLine: {
                            data: [
                                { type: "average", name: "平均值" }
                            ]
                        }
                    }
                ]
            };

            // 设置图表的配置项
            this.chartInstance.setOption(option);
        }
    }
};
</script>

<style>
#app {
    text-align: center;
    margin-top: 20px;
}
</style>